<template>
  <div class="china_map">
    <!-- <img src='http://localhost:8080/img/red-flag.54143926.jpg' /> -->
    <div id="china_map" style="width:452px;height:449px;"></div>
  </div>
</template>

<script>
import echarts from "echarts";
require("echarts/map/js/china");
export default {
  data() {
    return {
      data: [
        {
          name: "北京",
          value: 59,
          log: 116.4009766800, // 经度
          lat: 39.9033261500, // 纬度
        },
        {
          name: "上海",
          value: 142
        },
        {
          name: "黑龙江",
          value: 64,
          log: 126.6568351000,
          lat: 45.7400944600,
        },
        {
          name: "新疆",
          value: 330,
        },
        {
          name: "深圳",
          value: 190
        },
        {
          name: "湖北",
          value: 81
        },
        {
          name: "四川",
          value: 550
        }
      ]
    };
  },
  mounted() {
    // 初始化echarts实例
    this.chinachart = echarts.init(document.getElementById("china_map"));
    // 进行相关配置
    this.chartOption = {
      tooltip: {
        show: true, // 是否显示提示框组件
        // 鼠标移到图里面的浮动提示框
        // formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatter
        formatter(params, ticket, callback) {
          // params.data 就是series配置项中的data数据遍历
          let localValue;
          if (params.data) {
            localValue = params.data.value;
          } else {
            // 为了防止没有定义数据的时候报错写的
            localValue = 0;
          }
          let htmlStr = `
            <div style='font-size:18px;padding-bottom: 10px'> ${params.name}</div>
            <p style='text-align:left;margin-top:-10px;'>
              区域对应数据value：${localValue}<br/>
            </p>
          `;
          return htmlStr;
          // console.log(params);
          // console.log(ticket);
        },
        backgroundColor: "rgba(0, 0, 0, 0.5)", //提示标签背景颜色
        textStyle: { color: "#fff" } //提示标签字体颜色
      },
      // legend: {
      //   selectedMode: false // 取消图例的点击事件
      // },
      // visualMap的详细配置解析：https://echarts.baidu.com/option.html#visualMap
      visualMap: {
        // 左下角的颜色区域
        type: "piecewise", // 定义为分段型 visualMap
        min: 0,
        max: 1000,
        itemWidth: 14,
        itemHeight: 10,
        bottom: 20,
        left: 20,
        text: ['高', '低'], // 当有 text 时，label不显示。
        showLabel: true, // 是否显示每项的文本标签
        pieces: [
          // 自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
          { gt: 500, lte: Infinity, label: "500万以上", color: "#FCAF14" }, // (500, Infinity]
          { gt: 200, lte: 500, label: "200-500万", color: "#3DCF9A" }, // (200, 500]
          { gt: 100, lte: 200, label: "100-200万", color: "#6BCBCA" }, // (100, 200]
          { gt: 0, lte: 100, label: "0-100万", color: "#A3E4E3" } // (0, 100]
        ]
      },
      // geo配置详解： https://echarts.baidu.com/option.html#geo
      geo: {
        // 地理坐标系组件用于地图的绘制
        map: "china", // 表示中国地图
        roam: false, // 是否开启鼠标缩放和平移漫游
        zoom: 1.2, // 当前视角的缩放比例（地图的放大比例）
        label: {
          show: false, // 是否显示省份标签
          fontSize: 10
        },
        itemStyle: {
          // 地图区域的多边形 图形样式。
          borderColor: "#ffffff",
          emphasis: {
            // 高亮状态下的多边形和标签样式
            shadowBlur: 20,
            shadowColor: "rgba(254, 176, 0, 1)"
          }
        }
      },
      series: [
        {
          name: "", // 浮动框的标题（上面的formatter自定义了提示框数据，所以这里可不写）
          type: "custom",
          coordinateSystem: 'geo',
          geoIndex: 0,
          label: {
            show: false
          },
          // legendHoverLink: true,
          renderItem: (params, api) => {
            // console.log(params)
            //具体实现自定义图标的方法
            let res = null
            if(this.data[params.dataIndex].log) {
              res = {
                type: "image",
                origin: [0, 0], // 旋转和缩放的中心点
                style: {
                  image: require('./red-flag.jpg'),
                  width: 12,
                  height: 20,
                  text: '北京',
                  // position: [20, 0],
                  x: api.coord([this.data[params.dataIndex].log, this.data[params.dataIndex].lat])[0],
                  y: api.coord([this.data[params.dataIndex].log, this.data[params.dataIndex].lat])[1]
                }
              };
            }

            return res
          },
          // 这是需要配置地图上的某个地区的数据，根据后台的返回的数据进行拼接
          data: this.data
        }
      ]
    };
    // 使用刚指定的配置项和数据显示地图数据
    this.chinachart.setOption(this.chartOption);

    this.chinachart.on('click', (params) => {
      console.log(params)
    })
  }
};
</script>

<style>
</style>